<script lang="ts" setup>
import { useConsultOrderDetail } from '@/hooks'
import { OrderStatus } from '@/types/consult'

const props = defineProps<{
  id: string
}>()

// 获取咨询订单详情
const { orderDetail } = useConsultOrderDetail(props.id)

// 患病时长
const illnessTimes = new Map([
  [1, '一周内'],
  [2, '一月内'],
  [3, '半年内'],
  [4, '半年以上'],
])

// 是否就诊
const consultFlags = new Map([
  [0, '未就诊'],
  [1, '就诊过'],
])
</script>

<template>
  <scroll-view background-color="#f6f6f6">
    <view class="consult-page">
      <view class="page-header">
        <!-- 订单状态 -->
        <view class="order-status">
          <view class="label">
            <text class="title">图文问诊 {{ orderDetail?.payment }}元</text>
            <text class="tips" v-if="orderDetail?.status === OrderStatus.YiQuXiao">
              取消/退款进度：{{ orderDetail?.cancelReason }},诊金将在1-7个工作日内退回原支付账户。
            </text>
          </view>
          <text class="status">{{ orderDetail?.statusValue }}</text>
        </view>
        <!--  医生信息 -->
        <view class="consult-doctor" v-if="orderDetail?.docInfo?.id">
          <text class="lable">服务医生信息</text>
          <view class="doctor">
            <image class="doctor-avatar" :src="orderDetail?.docInfo?.avatar" />
            <view class="doctor-info">
              <view class="meta">
                <text class="name">{{ orderDetail?.docInfo?.name }}</text>
                <text class="title"
                  >{{ orderDetail?.docInfo?.depName }} |
                  {{ orderDetail?.docInfo?.positionalTitles }}</text
                >
              </view>
              <view class="meta">
                <text class="tag">{{ orderDetail?.docInfo?.gradeName }}</text>
                <text class="hospital">{{ orderDetail?.docInfo?.hospitalName }}</text>
              </view>
            </view>
            <view class="arrow">
              <uni-icons size="18" color="#C3C3C5" type="forward" />
            </view>
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="consult-patient" v-if="orderDetail?.patientInfo?.id">
        <view class="list-title">患者资料</view>
        <uni-list :border="false">
          <uni-list-item
            title="患者信息"
            :right-text="`${orderDetail?.patientInfo?.name} | ${orderDetail?.patientInfo?.genderValue} | ${orderDetail?.patientInfo?.age}岁`"
          />
          <uni-list-item
            title="患病时长"
            :right-text="illnessTimes.get(orderDetail?.illnessTime ?? 0)"
          />
          <uni-list-item
            title="就诊情况"
            :right-text="consultFlags.get(orderDetail?.consultFlag ?? 0)"
          />
          <uni-list-item title="病情描述" :note="orderDetail?.illnessDesc" />
        </uni-list>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <view class="list-title">订单信息</view>
        <uni-list :border="false">
          <uni-list-item title="订单编号" :right-text="orderDetail?.orderNo" />
          <uni-list-item title="创建时间" :right-text="orderDetail?.createTime" />
          <uni-list-item title="应付款" :right-text="`¥${orderDetail?.payment}`" />
          <uni-list-item title="优惠券">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ orderDetail?.couponDeduction ?? '' }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ orderDetail?.pointDeduction ?? '' }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ orderDetail?.actualPayment }}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </view>

      <view class="notice-bar" v-if="orderDetail?.status === OrderStatus.DaiZhiFu">
        <uni-notice-bar :text="`请在 ${orderDetail?.countdown} 内完成支付，超时订单将取消`" />
      </view>

      <!-- 底部操作 -->
      <view class="toolbar">
        <template v-if="orderDetail?.status === OrderStatus.DaiZhiFu">
          <view class="total-amount">
            需付款: <text class="number">¥{{ orderDetail?.payment ?? '' }}</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <!-- 待接诊 -->
        <template v-else-if="orderDetail?.status === OrderStatus.DaiJieZhen">
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">继续咨询</button>
          </view>
        </template>
        <!-- 咨询中 -->
        <template v-else-if="orderDetail?.status === OrderStatus.ZiXunZhong">
          <view class="buttons">
            <button class="uni-button">继续咨询</button>
          </view>
        </template>
        <!-- 已完成 -->
        <template v-else-if="orderDetail?.status === OrderStatus.YiWanCheng">
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text>删除订单</text>
            </view>
            <button class="uni-button">再次咨询</button>
          </view>
        </template>
        <!-- 已取消 -->
        <template v-else-if="orderDetail?.status === OrderStatus.YiQuXiao">
          <view class="buttons">
            <button class="uni-button minor">删除订单</button>
            <button class="uni-button">咨询其它医生</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
